<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="110">
          <FormItem label="对齐方式">
            <Select :transfer="true" size="small" v-model="pagerConfig.textAlign">
              <Option v-for="(item, index) in $PnDict.textAligns" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="每页条数">
            <InputNumber size="small" :max="100000" :min="0" v-model="pagerConfig.pageSize" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="显示总记录数">
            <i-switch size="small" v-model="pagerConfig.showTotal"></i-switch>
          </FormItem>
<!--          <FormItem label="每页条数配置"></FormItem>-->
          <FormItem label="简洁版">
            <i-switch size="small" v-model="pagerConfig.simple"></i-switch>
          </FormItem>
          <FormItem label="显示快捷跳转">
            <i-switch size="small" v-model="pagerConfig.showElevator"></i-switch>
          </FormItem>
          <FormItem label="上一页按钮文字">
            <Input size="small" v-model="pagerConfig.prevText"/>
          </FormItem>
          <FormItem label="下一页按钮文字">
            <Input size="small" v-model="pagerConfig.nextText"/>
          </FormItem>

        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="PagerComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="页码改变时运行">
            <InteractionSender :interactionKey="'pageIndexChange'" :canAddFieldsMap="false"></InteractionSender>
            <Alert show-icon style="padding-right: 10px;">
              params.pageIndex：当前页码<br/>
              params.pageSize：每页条数<br/>
              params.totalCount：总记录数
            </Alert>
            <CodeEditor v-model="pagerScript.onChangeScriptCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'PagerCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        pagerConfig: 'component.compConfigData.pagerConfig',
        pagerScript: 'component.compConfigData.pagerScript'

      })
    }
  }
</script>

<style scoped>

</style>
